<template lang="pug">
  .flecs(:class="{'is-home': isHome}")
    .flecs-header.container
      header
        nav.toolbar.fixed-width
          router-link.tb-item.ml-1(to="/", active-class="active", exact) Home

          router-link.tb-item.ml-1(v-for="(path, name) in nav", :key="name", :to="path", active-class="active") {{name}}

          a.tb-btn.ml-auto.mr-1(href="https://gitee.com/flecs/flecs/star", title="Mark")
            font-awesome-icon(:icon="markIcon")
          a.tb-btn.mr-1(href="https://gitee.com/flecs/flecs", title="Repository")
            font-awesome-icon(:icon="repoIcon")

      .main
        .presentation.my-1.fixed-width
          .main
            h1 {{name}}, <span class="muted">/'fleks/</span>
            p.
              A small set of CSS classes that helps to build your website easily. <br/>
              Inspired by <a href="https://getbootstrap.com">Bootstrap</a> and several frameworks.
            .btns
              router-link.btn.primary(to="/components") Learn More
              a.btn.ml-1(href="https://gitee.com/flecs/flecs/releases") Download

      footer
        .toolbar.my-2.fixed-width
          .tb-text Copyright (C) yfwz100

          a.tb-text.ml-auto(href="https://gitee.com/flecs/flecs/blob/master/CHANGELOG") Changelog
          a.tb-text.mx-1(href="https://gitee.com/flecs/flecs/blob/master/LICENSE") License

    router-view.fixed-width
</template>

<style lang="sass">
$primary: #44abf0

.flecs
  height: 100%

header
  background-color: #fff

  .toolbar
    background: transparent
    font-size: 1.1rem
    color: #333

    .tb-item
      text-transform: capitalize
      color: #555
      transition: .5s

      &:hover, &.active
        background-color: transparent
        color: $primary

.flecs-header > .main
  flex: 1
  display: flex
  flex-direction: column
  overflow: hidden

  .presentation
    flex: 1
    transition-duration: .2s

    .main
      font-weight: 300
      white-space: nowrap

      .muted
        color: #ccc

      .btns
        transition-duration: .2s
        opacity: 0
        height: 0
        overflow: hidden

        .is-home &
          opacity: 1
          height: auto
          overflow: visible

footer
  transition-duration: .2s
  opacity: 0

  .is-home &
    opacity: 1

.flecs-header
  transition-duration: .2s
  height: 300px

  .is-home &
    height: 100%
</style>

<script lang="coffee">
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import RepoIcon from '@fortawesome/fontawesome-free-solid/faCodeBranch'
import MarkIcon from '@fortawesome/fontawesome-free-solid/faStar'

export default
  components:
    FontAwesomeIcon: FontAwesomeIcon
  data: ->
    nav:
      components: '/comps'
      about: '/about'
    name: 'Flecs'
  computed:
    isHome: -> @$route.path is '/'
    repoIcon: -> RepoIcon
    markIcon: -> MarkIcon
</script>
